<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迷你贪吃蛇</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 1000px;
            height: 500px;
            border: 1px solid black;
            margin: 20px auto;
            position: relative;
        }

        .mine {
            width: 30px;
            height: 30px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //生成自己
        let mine = $('<div/>').addClass('mine')
        $('#box').append(mine)
        //自己的宽度
        let mine_width = $('.mine').innerWidth()
        //自己的高度
        let mine_height = $('.mine').innerHeight()
        //容器的宽度
        let box_width = $('#box').innerWidth()
        //容器的高度
        let box_height = $('#box').innerHeight()
        //初始化自己的位置
        mine.css({
            left: ((box_width / 2) - (mine_width / 2)) + 'px',
            top: ((box_height / 2) - (mine_height / 2)) + 'px'
        })
        //定义运动的方法
        let position = 'top'

        //offset().top，是返回元素到浏览器顶部的距离
        //offset().left，是返回元素到浏览器左边的距离
        //position().top，是返回元素到父级顶部的距离
        //position().left，是返回元素到父级左边的距离

        //自己运动的方法
        let timer = null
        function run() {
            timer = setInterval(() => {
                let top = mine.position().top
                let left = mine.position().left
                //判断运动的方向
                switch (position) {
                    case "top":
                        top -= 15
                        break;
                    case "bottom":
                        top += 15
                        break;
                    case "left":
                        left -= 15
                        break;
                    case "right":
                        left += 15
                        break;
                }
                mine.css({
                    top: top + 'px',
                    left: left + 'px'
                })
            }, 200);
        }

        //键盘的按下事件
        $(document).keydown(function(e){
            //获取按键编码
            let {keyCode} = e
            console.log(keyCode);
            switch(keyCode){
                //如果是回车键，运行/暂停
                case 13: 
                    if(timer===null){
                        run()
                    }else{
                        clearInterval(timer)
                        timer = null
                    }
                    break;
                //上
                case 38:
                    position='top'
                    break;
                //下
                case 40:
                    position='bottom'
                    break;
                //左
                case 37: 
                    position='left'
                    break;
                //右
                case 39: 
                    position='right'
                    break;
            }
        })
    </script>
</body>

</html>